page-register
{
  // 头部
  .register-header
  {
    ion-navbar
    {
      min-height: px2rem(88);
      padding: 0;
      .toolbar-background
      {
        background-color: $office-page-background;
        border: 0;
      }
      // 返回按钮
      ion-buttons.back-buttons
      {
        height:  px2rem(44);
        margin: 0 0 0 px2rem(32);
        padding: 0;
        width: px2rem(32);
        background: transparent;
        position: relative;
        button {
          width: 100%;
          height: 100%;
          position: absolute;
          right: 0;
          top: 0;
          padding: 0;
          margin: 0;
          span {
            height: 100%;
            width: 100%;
            cursor: pointer;
            background: url("../assets/img/login/close.png") no-repeat center;
            background-size: contain;
          }
        }

        // 兼容安卓
        &.bar-buttons-md
        {
          -webkit-order: 0;
          -ms-flex-order: 0;
          order: 0;
        }
      }

    }
    // 清除后置内置生成的
    &::after
    {
      height: 0;
    }
  }

  // 内容
  .register-section
  {

    // 内容页面
    .scroll-content
    {
      background-color: $office-page-background;

      // 平移
      .translateY
      {
        @include office-translateY(px2rem(-70));
      }

      // 显示头部提示
      .reg-title
      {
        @include office-transition(all,.5s);
        height: px2rem(57);
        width: 100%;
        text-align: center;
        font-size: px2rem(36);
        padding-top: px2rem(17);
        margin-bottom: px2rem(80);
        color: $office-light-black-three;
      }

      // 表单
      form
      {
        @include office-transition(all,.5s);
        padding: px2percent(17) px2rem(32) 0 px2rem(32);

        // 输入框
        >ion-list
        {
          margin: 0;
          padding: 0;

          ion-item
          {
            padding: 0;
            margin-bottom: px2rem(32);
            height: px2rem(88);
            border-radius: px2rem(44);

            .item-inner
            {
              padding: 0;

              // 内容展示区
              .input-wrapper
              {
                ion-label
                {
                  margin: 0 0 0 px2rem(32);

                  // 头部图标
                  >div
                  {
                    float: left;
                    height: px2rem(44);
                    width: px2rem(44);
                    // 注册用户名
                    &.reg-name
                    {
                      background: url("../assets/img/login/username.png") no-repeat center;
                      background-size: contain;
                    }
                    // 注册密码
                    &.reg-password
                    {
                      background: url("../assets/img/login/password.png") no-repeat center;
                      background-size: contain;
                    }
                    // 短信验证码
                    &.msg-code
                    {
                      background: url("../assets/img/login/msg-code.svg") no-repeat center;
                      background-size: contain;
                    }
                  }

                  // 输入框
                  >input
                  {
                    float: left;
                    border: 0;
                    outline: none;
                    font-size: px2rem(30);
                    width: px2rem(443);
                    padding-left: px2rem(32);
                    margin-top: px2rem(3.5);
                    color : $office-light-black-three;

                    &.msg-code-input
                    {
                      width: px2rem(340);
                    }
                  }

                  // 清除按钮
                  >span
                  {
                    float: right;
                    margin-right: px2rem(64);

                    // 清除
                    &.clear-button
                    {
                      width: px2rem(28);
                      height: px2rem(28);
                      margin-top: px2rem(9);
                      background: url("../assets/img/login/clear-button.png") no-repeat center;
                      background-size: contain;
                    }
                    // 显示
                    &.show-pwd
                    {
                      width: px2rem(55);
                      height: px2rem(32);
                      margin-top: px2rem(7);
                      background: url("../assets/img/login/unvisible.png") no-repeat center;
                      background-size: contain;

                      &.active
                      {
                        background: url("../assets/img/login/visible.png") no-repeat center;
                        background-size: contain;
                      }

                    }

                    // 验证码清除
                    &.clear-msg-button
                    {
                      float: left;
                      margin-right: 0;
                      width: px2rem(28);
                      height: px2rem(28);
                      margin-top: px2rem(8);
                      background: url("../assets/img/login/clear-button.png") no-repeat center;
                      background-size: contain;
                    }
                    &.show-time
                    {
                      margin: px2rem(5) px2rem(19) 0 0;
                      font-size: px2rem(28);
                      color: $office-light-black-nine;
                    }
                  }

                  // 按钮
                  >button
                  {
                    float: right;
                    width: px2rem(64);
                    height: 100%;
                    margin: px2rem(8) px2rem(64) 0 0;
                    padding: 0;
                    font-size: px2rem(28);
                    color: $office-default;
                  }

                }


              }

            }
          }

        }

        // 按钮
        >button.do-reg
        {
          margin: px2rem(64) 0 0 0;
          height: px2rem(88);
          border-radius: px2rem(44);
          @include office-background();
          span
          {
            font-size: px2rem(36);
            color: $office-white;
          }
          // 按钮禁用
          @include office-button-disable;
        }

        // 用户协议
        >p
        {
          @include office-transition(all,.5s);
          font-weight: normal;
          margin: px2rem(32) 0 0 0;
          font-size: px2rem(28);
          text-align: center;
          color: $office-black;
          >a
          {
            color: $office-blue;
          }

        }

        // 账号登录
        .do-login
        {
          @include office-transition(all,.5s);
          font-weight: normal;
          margin: px2rem(40) 0 0 0;
          font-size: px2rem(28);
          text-align: center;
          color: $office-default;
        }

      }

    }
  }
}

